<template>
  <div class="header">
    <div class="Totalrevenue">
      <span style="color: white" id="hjsr">
        {{ sum }}
      </span>
      <span>
        <i>合计收入</i>
      </span>
    </div>

    <div class="Longtable">
      <div class="Longtableone">
        <div class="one">
          <i>收支概括</i>
        </div>
        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="sfje"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>收费金额</i>
          </div>
        </div>
        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="zcje"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>退费金额</i>
          </div>
        </div>
      </div>

      <div class="Longtabletwo">
        <div class="one">
          <i>收入渠道</i>
        </div>

        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="xjsr"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>现金收入</i>
          </div>
        </div>

        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="wxsr"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>微信收入</i>
          </div>
        </div>

        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="zfbsr"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>支付宝收入</i>
          </div>
        </div>

        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="xjtk"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>现金退款</i>
          </div>
        </div>

        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="wxtk"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>微信退款</i>
          </div>
        </div>

        <div class="two">
          <div style="width: 100px; height: 50%" class="income border">
            <span style="color: white" id="zfbtk"></span>
          </div>
          <div style="width: 100px; height: 50%" class="income">
            <i>支付宝退款</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPayType, getRef, getSum, getMinus } from "@/api/carepkg/paylog";
export default {
  name: "Barchart",
  data() {
    return {
      //收费金额渲染
      sfje: null,
      //当前数据页的第几页
      currentPage: 1,
      //总数据条数
      total: 0,
      //每页显示多少行数据,默认为10条
      pagesize: 10,
      //分页后的当前页数据
      registrationList: [],
      // 代表是从后端获取的所有数据
      ticket: [],
      sum: 1,
      num2: 0,
      num1: 0,
    };
  },
  created() {
    this.getSummon();
  },
  watch: {
    num2: function (newQuestion, oldQuestion) {
      this.sum = this.num1 -this.num2;
    },
  },
  methods: {
    getSummon() {
      //收费总金额
      getSum().then((response) => {
        // //获取数据并赋值
        // this.ticket = response.data;
        this.sfje = response.data.flje;
        (document.getElementById("sfje").innerText = this.sfje),
        this.num1=this.sfje;
          //获取返回数据的总行数
          (this.total = response.data.length);
        //获取当前页面的数据,此方法在下方定义
        this.getDoctorInfo();
        console.log(response);
      });

      // //合计收入
      // getS().then((response) => {
      //   // //获取数据并赋值
      //   // this.ticket = response.data;
      //   this.hjsr = response.data;
      //   document.getElementById('hjsr').innerText=this.hjsr,
      //   //获取返回数据的总行数
      //   this.total = response.data.length;
      //   //获取当前页面的数据,此方法在下方定义
      //   this.getDoctorInfo();
      //   console.log(response);
      // });
      //支出总金额
      getMinus().then((response) => {
        // //获取数据并赋值
        // this.ticket = response.data;
        this.zcje = response.data.flje;
        (document.getElementById("zcje").innerText = this.zcje),
        this.num2=this.zcje;
          //获取返回数据的总行数
          (this.total = response.data.length);
        //获取当前页面的数据,此方法在下方定义
        this.getDoctorInfo();
        console.log(response);
      });

      //收入类型分类
      getPayType().then((response) => {
        this.srfl = response.data;

        for (let i = 0; i < this.srfl.length; i++) {
          if (this.srfl[i].paymentPlatform == 0) {
            document.getElementById("xjsr").innerText = this.srfl[i].flje;
          } else if (this.srfl[i].paymentPlatform == 1) {
            document.getElementById("wxsr").innerText = this.srfl[i].flje;
          } else if (this.srfl[i].paymentPlatform == 2) {
            document.getElementById("zfbsr").innerText = this.srfl[i].flje;
          }
        }

        // //获取数据并赋值
        // this.ticket = response.data;
        // this.sfje = response.data;
        // document.getElementById('sfje').innerText=this.sfje,
        //获取返回数据的总行数
        this.total = response.data.length;
        //获取当前页面的数据,此方法在下方定义
        this.getDoctorInfo();
        console.log(response + "resp");
      });

      //支出类型分类
      getRef().then((response) => {
        this.zcfl = response.data;
        for (let i = 0; i < this.zcfl.length; i++) {
          if (this.zcfl[i].paymentPlatform == 0) {
            document.getElementById("xjtk").innerText = this.zcfl[i].flje;
          } else if (this.zcfl[i].paymentPlatform == 1) {
            document.getElementById("wxtk").innerText = this.zcfl[i].flje;
          } else if (this.zcfl[i].paymentPlatform == 2) {
            document.getElementById("zfbtk").innerText = this.zcfl[i].flje;
          }
        }
        // //获取数据并赋值
        // this.ticket = response.data;
        // this.sfje = response.data;
        // document.getElementById('sfje').innerText=this.sfje,
        //获取返回数据的总行数
        this.total = response.data.length;
        //获取当前页面的数据,此方法在下方定义
        this.getDoctorInfo();
        console.log(response);
      });
    },
    //此方法用来获取当前页的数据
    getDoctorInfo() {
      //清空表格的list数据
      this.registrationList = [];
      //获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        //将遍历的数据添加到list里面
        this.registrationList.push(this.ticket[i]);
        //判断是否达到每一页的要求
        if (this.registrationList.length === this.pagesize) {
          break;
        }
      }
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      //修改当前每页的数据行数
      this.pagesize = size;
      //数据重新分页
      this.getDoctorInfo;
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber; //数据重新分页
      this.getDoctorInfo();
    },
  },
};
</script>

<style scoped lang="scss">
i {
  font-style: normal;
  color: white;
}

.border {
  border-bottom: 1px solid white;
}

.header {
  display: flex;
  flex-direction: row;
}

.Totalrevenue span {
  display: bottom;
  width: 70%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid white;
}
.Totalrevenue {
  width: 210px;
  height: 168px;
  // background-color: #faaf19;
   background-color:pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  // padding: 10px 10px;
}

.Longtable {
  width: 100%;
  height: 170px;

  margin-left: 10px;
}

.Longtable .Longtableone {
  width: 100%;
  height: 52%;
  background-color: #47c6c6;
  display: flex;
  flex-direction: row;
  border-bottom: 6px solid white;
}

.Longtable .Longtableone .one {
  width: 100px;
  height: 100%;
  // background-color: rosybrown;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Longtable .Longtableone .two {
}
.Longtable .Longtableone .two .income {
  //  border-bottom: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 40px;
  width: 50%;
}

.Longtable .Longtabletwo {
  width: 100%;
  height: 47%;
  background-color: #1fd273;
  display: flex;
  flex-direction: row;
}

.Longtabletwo .one {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Longtabletwo .two {
  width: 100px;
  height: 100%;
  // background-color: red;
  margin-left: 40px;
}

.Longtabletwo .two .income {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 50%;
}
</style>
